<template>
  <div class="pro-webview">
    <iframe v-if="src" :src="src" ref="webview" class="pro-webview-view" @load="handleLoaded" />
    <div v-else class="pro-webview-view-loaded-failure">网页加载失败...</div>
    <ProPageLoading v-if="src && !loaded" class="pro-webview-loading" />
    <Tooltip v-if="loaded" :title="tooltip" placement="left">
      <Icon class="pro-webview-fullscreen-button" @click.prevent="handleFullscreen" />
    </Tooltip>
  </div>
</template>

<script>
import { Icon, Tooltip } from 'ant-design-vue'
import { ProPageLoading } from '@hczy/ant-design-vue'

export default {
  name: 'ProWebView',
  components: {
    Icon,
    Tooltip,
    ProPageLoading
  },
  data() {
    return {
      loaded: false,
      fullscreen: false,
      src: ''
    }
  },
  computed: {
    tooltip() {
      return this.fullscreen ? '退出全屏' : '全屏'
    }
  },
  mounted() {
    const { query } = this.$route
    this.src = query?.url ?? ''
  },
  methods: {
    handleLoaded() {
      this.loaded = true
    },
    handleFullscreen() {
      const iframe = this.$refs.view
      this.fullscreen = !!iframe
      if (iframe) return
      // TODO：寻找第三方库
      // const internalHTML = iframe.contentWindow.document.documentElement
      // internalHTML.requset
    }
  }
}
</script>

<style lang="less">
.pro-webview {
  flex: 1 0;
  position: relative;
  height: calc(100vh - 80px);
  overflow: hidden;
  background-color: @component-background;

  &-view {
    .full();
    margin: 0;
    padding: 0;
    border: none;
  }

  &-view-loaded-failure {
    padding: 120px @padding-lg @padding-lg;
    font-weight: 700;
    text-align: center;
    color: @text-color-secondary;
  }

  &-loading {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }

  &-fullscreen-button {
    position: absolute;
    top: @padding-md;
    right: @padding-md;
    z-index: 1;
  }
}
</style>
